<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <title>区域今日数据</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/dist/css/oa-app.css">
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=18eZsB5LvSoIf1HZOCUBDXKWHMbvhfpa"></script>
    <style type="text/css">
        #allmap, #allmap2 {
            /*width: 100%;*/
            height: 300px;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
        .tableTop{
            border-bottom: hidden;
        }
        .tabletop{
            position: relative;
            margin-top: 5px;
        }
        .tabletop tr{
            background-color: #d3e8fd;
        }
        .text_center{
            text-align: center;
            margin-top: 5px;
            z-index: 1;
        }
        .div_border{
            border: 1px solid #c0c0c0;
            border-top: hidden;
        }
        .lineImg img {
            height: 45px;
            width: 45px;
            float: left;
            margin: 10px;
            object-fit: cover;
        }
        .td_bm{
            background-color:#f5f5f5 ;
        }
        #tq{
            height: 26px;
            width: 26px;
            float: left;
        }
        .weather{
            z-index: 1;
            margin-top: 5px;
        }
        .BMap_cpyCtrl {
            display: none;
        }

    </style>
</head>
<body>
<section class="content" id="app" v-cloak>
    <div><input style="width: 100%;border: 1px solid #cbcbcb;font-size: 12px;" @click="showTimePicker" v-model="dateTime"></div>
    <!--今日工作计划-->
    <table class="oa-table tableTop tabletop">
        <tbody>
        <tr>
            <td colspan="4">今日工作计划</td>
            <div class="text_center" style="background: #2a8cec;width: 85px;position:absolute;right:0px;color: #fff;line-height: 25px;" @click="goDetail('工作报告')">
                工作报告
            </div>
        </tr>
        </tbody>
    </table>
    <table class="oa-table " >
        <tbody>
        <tr class="oa-lineTwo-H">
            <td width="30%"  class="td_bm">上午计划描述</td>
            <td width="70%" class="oaColor" >{{planAm.content}}</td>
        </tr>
        <tr class="oa-lineTwo-H">
            <td width="30%" class="td_bm">下午计划描述</td>
            <td width="70%" class="oaColor">{{planPm.content}}</td>
        </tr>
        </tbody>
    </table>
    <!--考勤签到-->
    <table class="oa-table tabletop">
        <tbody>
        <tr >
            <div class="weather" v-if="weather.text_day"
                 style="width: 110px;position:absolute;left:0px;line-height: 26px;">
                <b style="margin: 0 2px;">{{weather.text_day}}</b><font
                    class="blue">{{weather.low}}</font>～<font
                    class="red">{{weather.high}}℃</font><img id="tq"
                                                             :src="'/dist/img/weather/'+weather.code_day+'.png'"/></div>
            <td colspan="4">考勤签到</td>
            <div class="text_center" style="background: #2a8cec;width: 85px;position:absolute;right:0px;color: #fff;line-height: 26px;" @click="goDetail('综合信息')">
                综合信息
            </div>
        </tr>
        </tbody>
    </table>
    <div class="div_border"  >
        <template v-if="signState==='0'">
            <div class="calendar-box demo-box" id="demo-box" v-line-inserted2></div>
            <div style="padding:5px 10px;    border: 1px solid rgb(203, 203, 205);">
                <div style="display: flex">
                    <span > 请假原因：</span>
                    <span style="flex: 1" class="qjyy">{{signIn.remark}}</span>
                </div>
            </div>
        </template>
        <template v-else-if="signState==2">
            <!--缺勤-->
            <div  style="text-align: center;background: #ffffff;padding: 30px;border: 1px solid #cbcbcd;border-top: 0px;">
                <div style="text-align: center"><img style="" width="45%" src="/dist/img/icon_seal_queqin.png" style="margin-top: -30px"></div>
            </div>
        </template>
        <template v-else>
            <!--正常签到-->
            <img v-if="signIn.signUrl" :src="signIn.signUrl"
                 alt=""
                 style="width: 100%; height: 330px;display: block;border:  1px solid #cbcbcd;object-fit: fill;">
            <div v-if="signIn.signUrl"
                 style="padding:5px 10px;border:  1px solid #cbcbcd;margin-top: -1px;">
                <div style="display: flex">
                    <span >常驻地：</span>
                    <span style="flex: 1">{{(signIn.residence).replace(/(^\s+)|(\s+$)/g,"")}}</span>
                </div>
                <span style="margin-top: 4px">签到地：{{(signIn.address).replace(/(^\s+)|(\s+$)/g,"")}}</span><br/>
                <span style="margin-top: 4px;">相&nbsp;&nbsp;&nbsp;&nbsp;距：{{signIn.signInAlwaysDistance}}</span>
                <span style="float: right;position: relative;right: 20px;" v-if="isLate(signIn.signCreateTime)">
                    签到时间：{{signIn.signCreateTime}}
                    <template v-if="isLate(signIn.signCreateTime)">
                        <span class="tryStyle2">迟到</span>
                    </template>
                </span>
                <span style="float: right;position: relative;" v-else>
                    签到时间：{{signIn.signCreateTime}}
                </span>
            </div>
        </template>
    </div>
    <!--上午首次面访-->
    <table class="oa-table tabletop">
        <tbody>
        <tr >
            <div class="weather" v-if="weather.text_day"
                 style="width: 110px;position:absolute;left:0px;line-height: 26px;">
                <b style="margin: 0 2px;">{{weather.text_day}}</b><font
                    class="blue">{{weather.low}}</font>～<font
                    class="red">{{weather.high}}℃</font><img id="tq"
                                                             :src="'/dist/img/weather/'+weather.code_day+'.png'"/></div>
            <td colspan="4">上午首次面访</td>
            <div class="text_center" style="background: #2a8cec;width: 85px;position:absolute;right:0px;color: #fff;line-height: 26px;" @click="goDetail('意向客户')">
                意向客户
            </div>
        </tr>
        </tbody>
    </table>
    <template v-show="firstFace.signInLongitude">
        <div class="allmap" id="allmap" style="border: 1px solid #cbcbcd;"></div>
    </template>
    <template v-if="!firstFace.signInLongitude">
        <div style="height: 70px;line-height: 70px;text-align: center;background: #ffffff;border: 1px solid #cbcbcd;margin-top: -1px;">
            <b style="color: red;">缺勤</b>
        </div>
    </template>
    <div>
        <div><span>间 隔：{{firstFace.signInDiff}}</span><span style="float: right;margin-right: 5px;">今日考勤签到：{{sf(firstFace.signTime)}}</span></div>
        <div><span>距 离：{{firstFace.signInDistance}}</span><span style="float: right;margin-right: 5px;">首次面访签到：{{sf(firstFace.firstVisitTime)}}</span></div>
        <div><span>时 速：{{firstFace.signInspeed}}</span></div>
    </div>
    <!--上午拜访情况-->
    <table class="oa-table tableTop tabletop">
        <tbody>
        <tr>
            <td colspan="4">上午拜访情况</td>
            <div class="text_center" style="background: #2a8cec;width: 85px;position:absolute;right:0px;color: #fff;line-height: 25px;" @click="goDetail('面访轨迹')">
                面访轨迹
            </div>
        </tr>
        </tbody>
    </table>
    <template v-if="customerVisitAm&&customerVisitAm.length>0">
        <table class="oa-table"  v-for="(item,i) in customerVisitAm">
            <tbody>
            <tr style="position:relative">
                <td class="td_bm" colspan="4">{{item.customerName}}{{dm(item.visitMode)}}
                    <div class="text_center"  style="width: 85px;position:absolute;right:0px;margin-top:-26px;line-height: 26px;">
                        {{sf(item.arrivalsTime)}}
                    </div>
                </td>
            </tr>
            <tr>
                <td class="td_bm">客户电话</td>
                <td class="oaColor">
                    {{item.customerTel}}
                </td>
                <td class="td_bm">客户微信</td>
                <td class="oaColor">
                    {{item.customerWechat}}</span></td>
            </tr>
            <tr>
                <td class="td_bm">客户类型</td>
                <td class="oaColor">
                    {{item.customerType}}
                </td>
                <td class="td_bm">客户信用</td>
                <td class="oaColor">
                    {{item.customerCredit}}
                </td>
            </tr>
            <tr>
                <td class="td_bm">陪同人员</td>
                <td class="oaColor">
                    {{item.entourageName!=''?item.entourageName:'无'}}</span></td>
                <td class="td_bm">拜访时长</td>
                <td class="oaColor">
                    {{item.time}}分
                </td>
            </tr>
            <tr>
                <td class="td_bm">基本情况</td>
                <td colspan="3" class="lineTwo oaColor">
                    {{item.otherCondition}}
                </td>
            </tr>
            <tr>
                <td style="height: 80px;" class="td_bm">图片</td>
                <td style="height: 80px;" class="oa-lineTwo-H" colspan="3">
                    <div class="lineImg" style="border: 1px solid #cbcbcd;width: 45px;height: 45px;float: left;margin: 0 10px 10px 0;">
                        <template v-if="item.arrivalsImg">
                            <img :src="item.arrivalsImg" style="margin: 0;">
                            <span style="margin-top: 5px;margin-bottom:5px;color: #797878;">签到</span>
                        </template>
                        <template v-else>
                            <img src="/dist/img/zwImg.png" style="margin: 0;">
                            <span style="margin-top: 5px;margin-bottom:5px;color: #797878;">未签到</span>
                        </template>
                    </div>
                    <div class="lineImg" style="border: 1px solid #cbcbcd;width: 45px;height: 45px;float: left;margin: 0 10px 10px 0;">
                        <template v-if="item.leaveImg">
                            <img :src="item.leaveImg" style="margin: 0;">
                            <span style="margin-top: 5px;margin-bottom:5px;color: #797878;">签退</span>
                        </template>
                        <template v-else>
                            <img src="/dist/img/zwImg.png" style="margin: 0;">
                            <span style="margin-top: 5px;margin-bottom:5px;color: #797878;">未签退</span>
                        </template>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </template>
    <template v-else>
        <div  style="border-top: hidden;border: 1px solid #cbcbcb;height: 130px;" ></div>
    </template>
    <!--下午首次面访-->
    <table class="oa-table tabletop">
        <tbody>
        <tr >
            <div class="weather" v-if="weather.text_day"
                 style="width: 110px;position:absolute;left:0px;line-height: 26px;">
                <b style="margin: 0 2px;">{{weather.text_day}}</b><font
                    class="blue">{{weather.low}}</font>～<font
                    class="red">{{weather.high}}℃</font><img id="tq"
                                                             :src="'/dist/img/weather/'+weather.code_day+'.png'"/></div>
            <td colspan="4">下午首次面访</td>
            <div class="text_center" style="background: #2a8cec;width: 85px;position:absolute;right:0px;color: #fff;line-height: 26px;" @click="goDetail('意向客户')">
                意向客户
            </div>
        </tr>
        </tbody>
    </table>
    <template v-show="firstFace.signInLongitude">
        <div class="allmap" id="allmap" style="border: 1px solid #cbcbcd;"></div>
    </template>
    <template v-if="!firstFace.signInLongitude">
        <div style="height: 70px;line-height: 70px;text-align: center;background: #ffffff;border: 1px solid #cbcbcd;margin-top: -1px;">
            <b style="color: red;">缺勤</b>
        </div>
    </template>
    <div>
        <div><span>间 隔：{{firstFace.signInDiff}}</span><span style="float: right;margin-right: 5px;">今日考勤签到：{{sf(firstFace.signTime)}}</span></div>
        <div><span>距 离：{{firstFace.signInDistance}}</span><span style="float: right;margin-right: 5px;">首次面访签到：{{sf(firstFace.firstVisitTime)}}</span></div>
        <div><span>时 速：{{firstFace.signInspeed}}</span></div>
    </div>
    <!--下午拜访情况-->
    <table class="oa-table tableTop tabletop">
        <tbody>
        <tr>
            <td  colspan="4">下午拜访情况</td>
            <div class="text_center" style="background: #2a8cec;width: 85px;position:absolute;right:0px;color: #fff;line-height: 25px;" @click="goDetail('面访轨迹')">
                面访轨迹
            </div>
        </tr>
        </tbody>
    </table>
    <template v-if="customerVisitPm&&customerVisitPm.length>0">
        <table class="oa-table"  v-for="(item,i) in customerVisitPm" >
            <tbody>
            <tr style="position:relative">
                <td class="td_bm" colspan="4">{{item.customerName}}{{dm(item.visitMode)}}
                    <div class="text_center" style="width: 85px;position:absolute;right:0px;margin-top:-26px;line-height: 26px;">
                        {{sf(item.arrivalsTime)}}
                    </div></td>
            </tr>
            <tr>
                <td class="td_bm">客户电话</td>
                <td class="oaColor">
                    {{item.customerTel}}
                </td>
                <td class="td_bm">客户微信</td>
                <td class="oaColor">
                    {{item.customerWechat}}</span></td>
            </tr>
            <tr>
                <td class="td_bm">客户类型</td>
                <td class="oaColor">{{item.customerType}}
                </td>
                <td class="td_bm">客户信用</td>
                <td class="oaColor">{{item.customerCredit}}
                </td>
            </tr>
            <tr>
                <td class="td_bm">陪同人员</td>
                <td class="oaColor">{{item.entourageName!=''?item.entourageName:'无'}}</span></td>
                <td class="td_bm">拜访时长</td>
                <td class="oaColor">
                    {{item.time}}分
                </td>
            </tr>
            <tr>
                <td class="td_bm">基本情况</td>
                <td colspan="3" class="lineTwo oaColor">
                    {{item.otherCondition}}
                </td>
            </tr>
            <tr>
                <td class="td_bm" style="height: 80px;">图片</td>
                <td style="height: 80px;" class="oa-lineTwo-H"  colspan="3">
                    <div class="lineImg" style="border: 1px solid #cbcbcd;width: 45px;height: 45px;float: left;margin: 0 10px 10px 0;">
                        <template v-if="item.arrivalsImg">
                            <img :src="item.arrivalsImg" style="margin: 0;">
                            <span style="margin-top: 5px;margin-bottom:5px;color: #797878;">签到</span>
                        </template>
                        <template v-else>
                            <img src="/dist/img/zwImg.png" style="margin: 0;">
                            <span style="margin-top: 5px;margin-bottom:5px;color: #797878;">未签到</span>
                        </template>
                    </div>
                    <div class="lineImg" style="border: 1px solid #cbcbcd;width: 45px;height: 45px;float: left;margin: 0 10px 10px 0;">
                        <template v-if="item.leaveImg">
                            <img :src="item.leaveImg" style="margin: 0;">
                            <span style="margin-top: 5px;margin-bottom:5px;color: #797878;">签退</span>
                        </template>
                        <template v-else>
                            <img src="/dist/img/zwImg.png" style="margin: 0;">
                            <span style="margin-top: 5px;margin-bottom:5px;color: #797878;">未签退</span>
                        </template>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </template>
    <template v-else>
        <div  style="border-top: hidden;border: 1px solid #cbcbcb;height: 130px;" ></div>
    </template>
    <!--考勤签退-->
    <table class="oa-table tabletop">
        <tbody>
        <tr >
            <div class="weather" v-if="weather.text_day"
                 style="width: 110px;position:absolute;left:0px;line-height: 26px;">
                <b style="margin: 0 2px;">{{weather.text_day}}</b><font
                    class="blue">{{weather.low}}</font>～<font
                    class="red">{{weather.high}}℃</font><img id="tq"
                                                             :src="'/dist/img/weather/'+weather.code_day+'.png'"/></div>
            <td colspan="4">考勤签退</td>
            <div class="text_center" style="background: #2a8cec;width: 85px;position:absolute;right:0px;color: #fff;line-height: 26px;" @click="goDetail('综合信息')">
                综合信息
            </div>
        </tr>
        </tbody>
    </table>
    <div class="div_border">
        <template v-if="signState==='0'">
            <div class="calendar-box demo-box" id="demo-box" v-line-inserted2></div>
            <div style="padding:5px 10px;    border: 1px solid rgb(203, 203, 205);">
                <div style="display: flex">
                    <span > 请假原因：</span>
                    <span style="flex: 1" class="qjyy">{{signIn.remark}}</span>
                </div>
            </div>
        </template>
        <template v-else-if="signState==2">
            <!--缺勤-->
            <div  style="text-align: center;background: #ffffff;padding: 30px;border: 1px solid #cbcbcd;border-top: 0px;">
                <div style="text-align: center"><img style="" width="45%" src="/dist/img/icon_seal_queqin.png" style="margin-top: -30px"></div>
            </div>
        </template>
        <template v-else>
            <!--正常签到-->
            <img v-if="signIn.signOutUrl" :src="signIn.signOutUrl"
                 alt=""
                 style="width: 100%; height: 330px;display: block;border:  1px solid #cbcbcd;object-fit: fill;">
            <div v-if="signIn.signOutUrl"
                 style="padding:5px 10px;border:  1px solid #cbcbcd;margin-top: -1px;">
                <div style="display: flex">
                    <span >常驻地：</span>
                    <span style="flex: 1">{{(signIn.residence).replace(/(^\s+)|(\s+$)/g,"")}}</span>
                </div>
                <div style="margin-top: 4px">
                    <span>签退地：</span>
                    <span>{{(signIn.signOutAddress).replace(/(^\s+)|(\s+$)/g,"")}}</span>
                </div>
                <span style="margin-top: 4px;">相&nbsp;&nbsp;&nbsp;&nbsp;距：{{signIn.signOutAlwaysDistance}}</span>
                <span style="float: right">签退时间：{{signIn.signOutTime}}</span>
            </div>

        </template>
    </div>
    <!--今日费用-->
    <table class="oa-table tableTop tabletop">
        <tbody>
        <tr>
            <td colspan="4">今日费用</td>
        </tr>
        </tbody>
    </table>
    <table class="oa-table" v-for="(item,i) in cost">
        <tbody>
        <tr>
            <td style="background-color: white;border-bottom: 2px solid #2a8cec">费用类型</td>
            <td class="oaColor">{{item.costSmallName}}</td>
            <td class="td_bm">金额(元)</td>
            <td class="oaColor">{{item.money}}</td>
        </tr>
        <tr>
            <td class="td_bm">发票</td>
            <td class="oaColor">{{item.invoiceFlag=="1"?"有":"无"}}</td>
            <td class="td_bm">时间</td>
            <td class="oaColor">{{yrsf(item.createTime)}}</td>
        </tr>
        <tr>
            <td class="td_bm">说明</td>
            <td colspan="3" class="oa-lineTwo-H oaColor">
                <span style="color: rgb(42, 140, 236)"><template v-if="item.costSmallName=='住宿费'">{{(item.cohabitation=='' || item.cohabitation=='无')? '': '合住人：'+item.cohabitation +'，'}}</template>{{item.remark==''?'':''+item.remark}}</span>
            </td>
        </tr>
        <tr>
            <td class="td_bm">附件</td>
            <td colspan="3" class="oaColor">
                <template v-for="(url,i) in (item.img).split(',')">
                    <img  :src="url" v-if="url"
                          @click="openImg(item.img,i)" alt=""
                          style="border: 1px solid #cbcbcd;width: 45px;height: 45px;float: left;margin: 2px;">
                </template >
            </td>
        </tr>
        </tbody>
    </table>

</section>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="https://file.ggxqce.com/web/axios.min.js"></script>
<script src="/dist/js/newOaApp.js"></script>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            userId: getUrlParamObj().userId,
            dateTime: getUrlParamObj().dateTime,
            roleName: getUrlParamObj().roleName,
            signIn: {},
            firstFace: {},
            weather: {},
            signState: '',
            customerVisitAm:[],
            customerVisitPm:[],
            cost: [],
            planAm:{},
            planPm:{},
            haveSettle: false,
            ysList: [],
            pageType: getUrlParamObj().pageType,
            searchParams: {
                auditFlag: 1,
                haveDelivery: 1,
                haveSettle: 0,
                userId: getUrlParamObj().userId,
                customerKeyId: '',
                createUserId: '',
                customerKey: '',
                createUserName: '',
            },
        },
        methods: {
            goDetail:function (name) {
                var that = this;
                var url = ''
                if(name=='工作报告'){
                    url='/page/wreport/listApp.html'
                }else if(name=='综合信息'){
                    url='/page/reportForm/personnel/entry.html'
                }else if(name=='意向客户'){
                    url='/page/intentionManagement/quYuIntentionalListAppNew.html'
                }else if(name=='面访轨迹'){
                    url=''
                }
                var param = {
                    screenType: '0',        //默认竖屏0, 横屏1
                    url: url + '?userId=' + that.userId,
                    showTitleBar: false,     //是否显示标题栏
                    enableRefresh: false,   //是否启用下拉刷新
                }
                JSBridge.call(ROUTER, 'navigateTo', param)

            },
            //费用时间处理
            yrsf:function (date) {
                if(date!=''){
                    var yrs = new Date(date).Format("MM-dd hh:mm");
                    return yrs;
                } else{
                    return '-';
                }
            },
            //一线是否迟到
            isLate: function (dateStr) {
                var date = new Date('2018-01-01 '+dateStr)
                if (date.getHours() == 8 && date.getMinutes() > 0) {
                    return true
                } else if (date.getHours() > 8) {
                    return true
                } else {
                    return false
                }
            },
            dm: function (flag) {
                if (flag == 0) {
                    return '(电访)';
                } else if (flag == 1) {
                    return '(面访)';
                } else {
                    return '';
                }
            },
            //获取天气
            get_weather: function () {
                var that = this;
                axios({
                    url: urlConfig.other.getTheWeather,
                    method: 'post',
                    data: {
                        "lat": that.signIn.latitude,
                        "lng": that.signIn.longitude
                    },
                }).then(function (data) {
                    that.weather = data.weather[0];
                    console.log(that.weather);
                })
            },
            //获取考勤签到
            get_signIn: function () {
                var that = this;
                axios({
                    url: urlConfig.newDaQuReportForm.getTodaySignForBRM,
                    method: 'post',
                    data: {
                        "userId": that.userId,
                        "dateTime": that.dateTime,
                        "regionId": that.regionId
                    },
                })
                    .then(function (data) {
                        console.log(data)
                        that.signIn = data.records[0].result;
                        that.signState = data.records[0].signState;
                        if (that.signIn.latitude) {
                            that.get_weather()
                        }
                    })
                prompt(JSON.stringify(obj))
            },
            sf:function (date) {
                if(date!=''){
                    var pcDate = new Date(date).Format(TimeFormat.short);
                    return pcDate;
                }else{
                    return '-';
                }

            },
            //获取第二天拜访计划
            get_plan: function () {
                var that = this;
                axios({
                    url: "/wreport/getTodayWorkPlan.json",
                    method: 'post',
                    data: {"userId": that.userId,
                        "dateTime": that.dateTime},
                }).then(function (respone) {
                    that.plan = respone.plan;
                    for(var i=0;i<that.plan.length;i++){
                        var plan = that.plan[i];
                        if(plan.type==6){
                            that.planAm=plan;
                        }else if(plan.type==7){
                            that.planPm=plan;
                        }
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            showTimePicker: function () {
                var that = this
                var param = {
                    title: '请选择',                                       //提示文字
                    startDate: '2018-01-01 00:00:00',                   //开始日期时间
                    endDate: '2020-12-12 00:00:00',                     //结束日期时间
                    //selectedDate: '2019-01-01 12:18:58'                //默认是当前时间
                    showYear: true,                                     //显示年
                    showMonth: true,                                    //显示月
                    showDay: true,                                      //显示日
                    showHour: false,                                     //显示时
                    showMinute: false,                                   //显示分
                    showSecond: false,                                   //显示秒

                }
                JSBridge.call(CALENDAR, 'showTimePicker', param, function (res) {
                    that.showToast(res)

                    var time = new Date(res).Format("yyyy-MM-dd");
                    that.dateTime = time;
                    that.get_all();
                })
            },
            showToast: function (title) {
                var param = {
                    title: title
                }
                JSBridge.call(UI, 'showToast', param)
            },
            //获取首次面访
            get_firstFace: function () {
                var that = this;
                axios.post(urlConfig.newReportForm.getFirstVisitAndSignForToday, {"userId": that.userId, "dateTime": that.dateTime
                })
                    .then(function (data) {
                        console.log(data)
                        that.firstFace = data.records
                        showBMap()
                    })
            },
            //获取上午面访 下午面访 电访
            get_faceVisit: function () {
                var that = this;
                axios({
                    url: "/newAppReportForRM/getCustomerVisitByUserId.json",
                    method: 'post',
                    data: {"userId": that.userId,
                        "dateTime": that.dateTime,
                        "type": '1',
                        "status": '1'},
                }).then(function (response) {
                    that.customerVisitPm=[];
                    that.customerVisitAm=[];
                    for(var i=0;i<response.result.length;i++){
                        var customerVisit = response.result[i];
                        var time = new Date(customerVisit.arrivalsTime).Format(TimeFormat.short)
                        if(time>'12:00'){
                            that.customerVisitPm.push(customerVisit);
                        } else{
                            that.customerVisitAm.push(customerVisit);
                        }
                    }
                    console.log(that.customerVisitAm);
                    console.log(that.customerVisitPm);
                }).catch(function (error) {
                    //that.isLoad = false;
                    //that.hideLoading();
                })
            },

            //获取今日费用
            get_cost: function () {
                var that = this;
                axios({
                    url:"/reportCost/getForPersonalCostByUserIdAndDateTime.json",
                    method: 'post',
                    data: {
                        "userId": that.userId,
                        "dateTime": that.dateTime
                    }
                }).then(function (data) {
                    console.log(data)
                    that.cost = data;
                }).catch(function (error) {
                    console.log(error)
                });
            },
            //app打开图片
            openImg: function (url, index) {
                if (!index) {
                    index = 0
                }
                var obj = {
                    type: 'img',
                    imgList: url,
                    position: index,
                }
                prompt(JSON.stringify(obj))
            },
            get_all:function () {
                var that = this;
                that.get_faceVisit();
                that.get_plan();
                that.get_signIn();
                that.get_cost();
                that.get_firstFace();
            }
        },
        mounted: function () {
            var that = this;
            that.get_all();

        }
    });
</script>
<script type="text/javascript">
    // 百度地图API功能
    function showBMap() {
        var map = new BMap.Map("allmap");

        // 复杂的自定义覆盖物
        function ComplexCustomOverlay(point, text) {
            this._point = point;
            this._text = text;

        }

        ComplexCustomOverlay.prototype = new BMap.Overlay();
        ComplexCustomOverlay.prototype.initialize = function (map) {
            this._map = map;
            var div = this._div = document.createElement("div");
            div.style.position = "absolute";
            div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
            div.style.backgroundColor = "#fff";
            div.style.border = "1px solid #333";
            div.style.color = "#333";
            div.style.height = "22px";
            div.style.paddingLeft = "2px";
            div.style.paddingRight = "2px";
            div.style.lineHeight = "20px";
            div.style.whiteSpace = "nowrap";
            div.style.MozUserSelect = "none";
            div.style.fontSize = "12px"
            var span = this._span = document.createElement("span");
            div.appendChild(span);
            span.appendChild(document.createTextNode(this._text));
            var that = this;

            var arrow = this._arrow = document.createElement("div");
            arrow.style.background = "url(/dist/img/jiao2.png) no-repeat";
            arrow.style.position = "absolute";
            arrow.style.width = "11px";
            arrow.style.height = "10px";
            arrow.style.top = "19px";
            arrow.style.left = "10px";
            arrow.style.overflow = "hidden";
            div.appendChild(arrow);

            map.getPanes().labelPane.appendChild(div);

            return div;
        }
        ComplexCustomOverlay.prototype.draw = function () {
            var map = this._map;
            var pixel = map.pointToOverlayPixel(this._point);
            this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
            this._div.style.top = pixel.y - 65 + "px";
        }

        // 复杂的自定义覆盖物2
        function ComplexCustomOverlay2(point, text) {
            this._point = point;
            this._text = text;

        }

        ComplexCustomOverlay2.prototype = new BMap.Overlay();
        ComplexCustomOverlay2.prototype.initialize = function (map) {
            this._map = map;
            var div = this._div = document.createElement("div");
            div.style.position = "absolute";
            div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
            div.style.backgroundColor = "#fff";
            div.style.border = "1px solid #333";
            div.style.color = "#333";
            div.style.height = "22px";
            div.style.paddingLeft = "2px";
            div.style.paddingRight = "2px";
            div.style.lineHeight = "20px";
            div.style.whiteSpace = "nowrap";
            div.style.MozUserSelect = "none";
            div.style.fontSize = "12px"
            var span = this._span = document.createElement("span");
            div.appendChild(span);
            span.appendChild(document.createTextNode(this._text));
            var that = this;

            var arrow = this._arrow = document.createElement("div");
            arrow.style.background = "url(/dist/img/jiao2.png) no-repeat";
            arrow.style.position = "absolute";
            arrow.style.width = "11px";
            arrow.style.height = "10px";
            arrow.style.top = "19px";
            arrow.style.left = "10px";
            arrow.style.overflow = "hidden";
            div.appendChild(arrow);

            map.getPanes().labelPane.appendChild(div);

            return div;
        }
        ComplexCustomOverlay2.prototype.draw = function () {
            var map = this._map;
            var pixel = map.pointToOverlayPixel(this._point);
            this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
            this._div.style.top = pixel.y - 86 + "px";
        }

        //根据经纬度的距离获取地图的缩放级
        function getRoom(diff) {
            var room = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14);
            var diffArr = new Array(360, 180, 90, 45, 22, 11, 5, 2.5, 1.25, 0.6, 0.3, 0.15, 0.07, 0.03, 0);
            for (var i = 0; i < diffArr.length; i++) {
                if ((diff - diffArr[i]) >= 0) {
                    return room[i];
                }
            }
            return 14;
        }

        //通过经纬度获取中心位置和缩放级别
        function getCenterPoint(maxJ, minJ, maxW, minW) {
            if (maxJ < minJ) {
                var minJ2 = maxJ
                maxJ = minJ
                minJ = minJ2
            }
            if (maxW < minW) {
                var minW2 = maxW
                maxW = minW
                minW = minW2
            }
            if (maxJ == minJ && maxW == minW) return [maxJ, maxW, 9];
            var diff = maxJ - minJ;
            if (diff < (maxW - minW)) diff = maxW - minW;
            diff = parseInt(10000 * diff) / 10000;
            var centerJ = minJ * 1000000 + 1000000 * (maxJ - minJ) / 2;
            var centerW = minW * 1000000 + 1000000 * (maxW - minW) / 2;
            var zoom = getRoom(diff);
            return [centerJ / 1000000, centerW / 1000000, zoom];
        }

        var userId = app.userId
        if (app.firstFace.signInLongitude && app.firstFace.arrivalsLongitude) {
            //2个点
            var CenterPoint = getCenterPoint(app.firstFace.signInLongitude, app.firstFace.arrivalsLongitude, app.firstFace.signInLatitude, app.firstFace.arrivalsLatitude)
            var point = new BMap.Point(CenterPoint[0], CenterPoint[1]);
            map.centerAndZoom(point, CenterPoint[2] - 1);
            var p1 = new BMap.Point(app.firstFace.signInLongitude, app.firstFace.signInLatitude);
            var p2 = new BMap.Point(app.firstFace.arrivalsLongitude, app.firstFace.arrivalsLatitude);
            var chaJ = Math.abs(Number(app.firstFace.signInLongitude) - Number(app.firstFace.arrivalsLongitude))
            var chaW = Math.abs(Number(app.firstFace.signInLatitude) - Number(app.firstFace.arrivalsLatitude))
            map.enableMapClick = false;
            var startIcon = new BMap.Icon("/dist/img/start.png", new BMap.Size(74, 106), {
                    imageOffset: new BMap.Size(0, -25)
                }
            );
            if (chaJ < 0.001 && chaW < 0.001) {
                var endIcon = new BMap.Icon("/dist/img/end.png", new BMap.Size(74, 106), {
                        imageOffset: new BMap.Size(10, -25)
                    }
                );
            } else {
                var endIcon = new BMap.Icon("/dist/img/end.png", new BMap.Size(74, 106), {
                        imageOffset: new BMap.Size(0, -25)
                    }
                );
            }
            var marker = new BMap.Marker(p1, {icon: startIcon});  // 创建标注
            marker.addEventListener("click", function () {
                //alert("签到");
                getSignInPic(userId)
            });
            var marker2 = new BMap.Marker(p2, {icon: endIcon});  // 创建标注
            marker2.addEventListener("click", function () {
                //alert("首面");
                getFirstVisitPic(userId)
            });
            map.addOverlay(marker);
            map.addOverlay(marker2);
            var myCompOverlay = new ComplexCustomOverlay(p1, "考勤签到 " + new Date(app.firstFace.signTime).Format("hh:mm"));
            if (chaJ < 0.001 && chaW < 0.001) {
                var myCompOverlay2 = new ComplexCustomOverlay2(p2, "首次面访签到 " + new Date(app.firstFace.firstVisitTime).Format("hh:mm"));
            } else {
                var myCompOverlay2 = new ComplexCustomOverlay(p2, "首次面访签到 " + new Date(app.firstFace.firstVisitTime).Format("hh:mm"));

            }
//            map.addOverlay(myCompOverlay);
//            map.addOverlay(myCompOverlay2);
            map.disableDragging();

        } else if (app.firstFace.signInLongitude) {
            //1个点
            var point = new BMap.Point(app.firstFace.signInLongitude, app.firstFace.signInLatitude);
            map.centerAndZoom(point, 13);
            var startIcon = new BMap.Icon("/dist/img/start.png", new BMap.Size(74, 106), {
                    imageOffset: new BMap.Size(0, -25)
                }
            );
            var marker2 = new BMap.Marker(point, {icon: startIcon});  // 创建标注
            marker2.addEventListener("click", function () {
                //alert("签到");
                getSignInPic(userId)
            });
            map.addOverlay(marker2);
            var myCompOverlay = new ComplexCustomOverlay(point, "考勤签到 " + new Date(app.firstFace.signTime).Format("hh:mm"));
//            map.addOverlay(myCompOverlay);
        } else {
            var point = new BMap.Point(app.firstFace.arrivalsLongitude, app.firstFace.arrivalsLatitude);
            map.centerAndZoom(point, 13);
            var endIcon = new BMap.Icon("/dist/img/end.png", new BMap.Size(74, 106), {
                    imageOffset: new BMap.Size(0, -25)
                }
            );
            var marker2 = new BMap.Marker(point, {icon: endIcon});  // 创建标注
            marker2.addEventListener("click", function () {
                //alert("首面");
                getFirstVisitPic(userId)
            });
            map.addOverlay(marker2);
            var myCompOverlay = new ComplexCustomOverlay(point, "首次面访签到 " + new Date(app.firstFace.firstVisitTime).Format("hh:mm"));
//            map.addOverlay(myCompOverlay);
        }
        map.disableDragging();


    }
</script>
</body>
</html>